<template>
    <div class="section-form">
        <my-form 
        label-width="140px"
        v-model="form"
        @submit="submitHandler"
        >

            <div class="title-tips">
                <i class="el-icon-info"></i>
               目前仅支持代办河北CA，其他地区CA代办服务陆续上线
            </div>
            <!-- <h2 class="title">
                选择代办CA
            </h2> -->

            <!-- <el-form-item 
            prop="catypecode"
            label-width="0"
            :rules="newRule('CA类型', 'required')"
            > -->
                <!-- <my-select
                    v-model="form.catypecode"
                    :url="`${$store.state.api.webUrl}/caagent/calist.json`"
                    :props="{value: 'id', label: 'valuename'}"
                    2way="amount,valuename"
                    :amount.sync="amount"
                    :valuename.sync="form.catypename"
                    @select="initFirstInfo"
                ></my-select> -->

                <!-- <select-card
                    v-model="form.catypecode"
                    :url="`${$store.state.api.webUrl}/caagent/calist.json`"
                    :props="{value: 'id', label: 'valuename'}"
                    2way="amount,valuename"
                    :amount.sync="amount"
                    :valuename.sync="form.catypename"
                    @select="initFirstInfo"
                ></select-card>
            </el-form-item> -->

            <h3 class="title">
                准备资料：
            </h3>

            <el-form-item 
            label="招标公告链接："
            prop="noticeurl"
            label-width="110px"
            :rules="newRule('招标公告链接', 'url')"
            style="width: 540px;"
            >
                <el-input v-model="form.noticeurl"></el-input>
            </el-form-item>

            <template
            v-if="form.catypecode"
            >
                <div class="title-label">
                    <div class="main">
                        资料上传：
                    </div>

                    <div class="sub">
                        下方资料属于基本资料，建议提交前上传完毕，如有未准备好的资料后续也可补充
                    </div>
                </div>

                <el-form-item 
                prop="noticeurl"
                label-width="0"
                >
                    <my-radio
                        v-model="uploadType"
                        :data="[{key:'mobile', value:'手机扫码上传'},{key:'pc', value:'使用电脑上传'},]"
                    ></my-radio>
                </el-form-item>

                <template v-if="uploadType === 'mobile'">
                    <div class="tip-upload-type">
                        <i class="el-icon-warning"></i>
                        在手机端上传资料提交后，该电脑端页面不要关闭，需在该页面进行支付。
                    </div>

                    <div class="qrcode-con">
                        <mobile-qrcode 
                            :search="{guid: form.guid, btype: 'ca', firstshow: 1}"
                        ></mobile-qrcode>
                    </div>
                </template>

                <template v-if="uploadType === 'pc'">
                    <el-form-item 
                    v-for="(item, index) in formList"
                    :key="index"
                    :label="item.label_name"
                    >
                        <template v-if="item.label_type === 'input'">
                            <el-input v-model="item.label_value"></el-input>
                        </template>

                        <template v-if="item.label_type === 'file'">
                            <dialog-upload 
                                :fileguid="item.label_value"
                                :name="item.label_name"
                                :example="item.examplevalue"
                                :template="item.templatevalue"
                            ></dialog-upload>
                        </template>
                    </el-form-item>
                </template>
            </template>

            <template v-slot:btn="scope">
                <div class="footer">
                    <div class="descs">
                        <div class="item">
                            <div class="label">
                                预计完成时间：
                            </div>
                            <div class="value">
                                24小时内
                            </div>
                        </div>

                        <div class="item">
                            <div class="label">
                                需支付：
                            </div>
                            <div class="value price">
                                ￥{{amount}}
                            </div>
                        </div>
                        <div>
                            <input-mobile-yzm v-if="!isLogin" ref="sign" class="mobile-yzm" prompt="此手机号用于平台登录,登录后可以查看订单进度"></input-mobile-yzm>
                        </div>
                    </div>

                    <div class="btns">
                        <el-button 
                        type="primary" 
                        size="large"
                        @click="scope.submitHandler"
                        >
                            提交并支付
                        </el-button>
                    </div>
                </div>
            </template>

            <dialog-clause 
                v-model="dialogVisibleClause"
                agree
                @click="agreeHandler"
                title="CA代办服务协议"
                type="ca-agent"
            ></dialog-clause>

            <dialog-pay
                ref="payer"
                @success="paySuccessHandler"
                @closeNoPay="closeNoPay"
            ></dialog-pay>
        </my-form>

        <!-- <input-mobile-yzm v-if="!isLogin" ref="sign" class="mobile-yzm" prompt="此手机号用于平台登录,登录后可以查看订单进度"></input-mobile-yzm> -->

    </div>
</template>

<script>
import DialogClause from '@components/sys/dialog-clause';
import DialogPay from '../components/dialog-pay.vue';
import MobileQrcode from '../components/mobile-qrcode.vue';
import SelectCard from '../components/select-card.vue';
import DialogUpload from '../components/dialog-upload.vue';

export default {
    props: {
        isLogin: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        DialogClause,
        DialogPay,
        MobileQrcode,
        SelectCard,
        DialogUpload,
    },
    data() {
        return {
            caTypes: [],

            amount: 0,

            form: {
                catypecode: '',
                catypename: '',
                noticeurl: '',
            },

            uploadType: '', // 上传方式

            dialogVisibleClause: false,

            formList: [],
            uploadData: {},
        };
    },
    methods: {
        submitHandler() {
            new Chain()
                .link((next) => {
                    if(this.isLogin){
                        next();
                    } else{
                        this.$refs.sign.login(() => {
                            next();
                        });
                    }
                })
                .link((next) => {
                    this.dialogVisibleClause = true;
                })
                .run();
        },
        agreeHandler() {
            new Chain().link(next => {
                this.dialogVisibleClause = false;
                next();
            }).link(next => {
                // this.paySuccessHandler();
                this.cdkeyHandler();
            }).run();
        },
        paySuccessHandler() {
                this.$emit('update');

                this.formList = [];

                this.form = {
                    catypecode: '',
                    catypename: '',
                    noticeurl: '',
                };
                this.uploadData = {};

                showMsgBox('支付成功!', 'success', () => {
                    if (!this.isLogin) {
                        window.location.reload();
                    }
                });
        },
        // // 提交表单
        cdkeyHandler() {
            this.$post(`${this.$store.state.api.webUrl}/caagent/edit.json`, {
                ...this.form,
                list: this.formList,
            }, data => {
                //提交成功，调用支付
                showMsg('添加成功', 'success');
                console.log(data);

                // 调起支付
                this.$refs.payer.initHandler(data);
            }, true);
        },

        //未支付成功
        closeNoPay() {
            showMsgBox('检测到您取消支付，在个人中心可以查看到此订单，半个小时内可继续完成支付');
        },

        initFirstInfo() {
            new Chain().link(next => {
                // 获取要完善的附件信息
                this.$get(`${this.$store.state.api.webUrl}/caagent/cadetail.json`, {
                    guid: this.form.catypecode,
                    firstshow: 1,
                }, data => {
                    this.formList = data;

                    next();
                });
            }).link(next => {
                // 初始提交
                this.$post(`${this.$store.state.api.webUrl}/caagent/add.json`, {
                    catypecode: this.form.catypecode,
                    catypename: this.form.catypename,
                    list: this.formList,
                }, data => {
                    var {projectids} = data;

                    this.form.guid = projectids;

                    next();
                }, true);
            }).run();
        },
        gettype() {
            let that = this;
            this.$get(`${this.$store.state.api.webUrl}/caagent/calist.json`, (data) => {

                let targetdata = [];
                data.forEach((item) => {
                    if (item.valuename == '河北ca') {
                        targetdata = item;
                        that.form.catypecode = targetdata.id;
                        that.amount = targetdata.amount;
                        that.form.catypename = targetdata.valuename;
                        that.initFirstInfo();
                    }
                });
            });
        },
    },
    mounted() {
        this.gettype();
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .section-form {
        padding: 30px 30px 0;
        border: solid 1px #dcdcdc;
        box-sizing: border-box;

        h2{
            font-size: 20px;
            color: #252525;
            line-height: 1em;
            margin-bottom: 32px;
        }

        h3{
            font-size: 16px;
            color: #252525;
            line-height: 1em;
            margin: 20px 0;
        }
        .title-tips{
            // text-align: center;
            font-weight: 600;
            font-size: 15px;
            color: $warningColor;
            margin: 0 0 20px ;
        }

        .title-label{
            display: flex;
            line-height: 1em;
            margin-bottom: 18px;

            .main{
                font-size: 14px;
                color: #252525;
            }

            .sub{
                font-size: 14px;
                color: #838383;
            }
        }

        .tip-upload-type{
            color: $warningColor;
            font-size: 12px;
            margin-bottom: 1em;
        }

        .footer{
            background-color: #f9fbff;
            margin: 0 -30px -20px;
            padding: 20px 30px;

            .descs{
                margin-bottom: 20px;

                .item{
                    display: flex;
                    color: #252525;
                    font-size: 16px;
                    line-height: 1em;

                    & + .item{
                        margin-top: 20px;
                    }

                    .value{
                        &.price{
                            font-size: 18px;
                            color: #ef2424;
                        }
                    }
                }
            }

            .btns{
                ::v-deep{
                    .el-button{
                        padding-left: 70px;
                        padding-right: 70px;
                    }
                }
            }
        }
    }

    .qrcode-con{
        width: 500px;
    }
    .mobile-yzm {
        margin-top: 14px;
        margin-bottom: 20px;
    }
</style>